<template>
	<view class="content" v-if="info">
		<view class="xq-box">
			<view class="xq-title">
				<text v-if="info.user_status == 0">提交时间：
					{{$u.timeFormat(info.createtime, 'yyyy-mm-dd hh:MM:ss')}}</text>
				<text v-if="info.user_status != 0">提交时间： {{ info.createtime }}</text>
				<text class="type" style="color: #0055B0;" v-if="info.user_status == 0">已提交</text>
				<text class="type" style="color: #0055B0;" v-if="info.user_status == 1">维修中</text>
				<text class="type" style="color: #E60012;" v-if="info.user_status == 2">待确认</text>
				<text class="type" style="color: #7C7C7C;" v-if="info.user_status == 3">已完成</text>
			</view>
			<view class="xq-nr">
				<view class="" style="color: #333;font-size: 36rpx;font-weight: bold;">报修类目：{{info.name}}</view>
				<view>订单id: {{info.id}}</view>
				<view>
					维修地点：{{info.report}}
				</view>
				<!-- <view>
					详细地址：{{info.report_address}}
				</view> -->
				<view v-if="info.user_status != 0">
					维修时间：<text style="color: #E60012;">截止{{info.repair_date}}</text>
				</view>
				<view>
					报修说明：{{info.report_message}}
				</view>
				<view class="">
					报修图片：
				</view>
				<view>
					<u-upload ref="uUpload" :deletable="false" :show-progress="false" width="518rpx" height="684rpx"
						:max-count="fileList.length" :file-list="fileList"></u-upload>
				</view>
			</view>
			<view class="xq-btn">
				<view class="title">报修信息</view>
				<view>姓名：{{info.user_name}}</view>
				<view>电话：{{info.user_phone}}</view>
			</view>
		</view>
		<view class="xq-box" style="margin-bottom: 60rpx;padding: 40rpx 0;" v-if="info.report_check_status == 2">
			<view class="title" style="padding-left: 20rpx;margin-bottom: 0;">拒绝原因：</view>
			<view style="margin: 30rpx 0 0 20rpx;">{{info.check_reasosn}}</view>
		</view>
		<view class="xq-box" style="margin-bottom: 60rpx;padding-top: 40rpx;" v-if="info.user_status != 0">
			<view class="title" style="padding-left: 20rpx;margin-bottom: 0;">服务商信息</view>
			<view class="xq-nr">
				<view>单位：{{info.company_name}}</view>
				<view>联系人：{{info.service_name}}</view>
				<view>电话：{{info.service_phone}}</view>
				<view>维修状态：
				<text class="type" style="color: #0055B0;" v-if="info.repair_status == 1">待确认</text>
				<text class="type" style="color: #E60012;" v-if="info.repair_status == 2">无法维修</text>
				<text class="type" style="color: #7C7C7C;" v-if="info.repair_status == 3">维修完成</text>
				</view>
				
				
				<view v-if="info.user_status == 2 || info.user_status == 3">
					备注信息：{{info.repair_message}}
				</view>
				<view class="" v-if="info.user_status == 2 || info.user_status == 3">
					维修图片：
				</view>
				<view v-if="info.user_status == 2 || info.user_status == 3">
					<u-upload ref="uUpload" :deletable="false" :show-progress="false" width="160rpx" height="160rpx"
						:max-count="repair_images.length" :file-list="repair_images"></u-upload>
				</view>
			</view>

		</view>
		<!-- <button class="u-reset-button btn-moren" @click="order_confirm" v-if="info.user_status == 2">已完成维修</button> -->

		<button class="u-reset-button btn-moren" v-if="info.user_status == 2" @click="showorder">去审核订单</button>
		<u-modal v-model="showOrder" :title="title" :content='content' :mask-close-able="true" show-cancel-button
			@cancel="order_qx" @confirm="order_confirm">
			<view style="margin-left: 130rpx;">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :value="item.id"
						:name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view v-if="from.check_status == 1" style="margin-top: 50rpx;
				margin-left: 20rpx; margin-right: 20rpx; padding: 30rpx;
				border: 3rpx solid #dadada;border-radius: 10rpx;">
				<textarea v-model="from.check_fail_message" placeholder="请输入原因"></textarea>
			</view>


		</u-modal>

		<button class="u-reset-button btn-moren" @click="quick" v-if="info.user_status == 1 && cuiweixiu">催维修</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: null,
				fileList: [],
				repair_images: [],
				index: 0,
				cuiweixiu: false,
				showOrder: false,
				title: '提示',
				content: '',

				list: [{
						id: 1,
						name: '审核通过',
						disabled: false
					},
					{
						id: 2,
						name: '审核不通过',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				from: {
					id: '',
					check_status: '',
					check_fail_message: '',
				},
			}
		},
		onLoad(e) {
			console.log(e)
			this.id = e.id
			this.index = e.index
			this.getXq()
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				//console.log(e);
				if (e == '审核通过') {
					this.from.check_status = 2

				} else {
					this.from.check_status = 1
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			confirm(e) {
				//console.log('1', e)
				this.repair_status = e[0].value
				this.repair_text = e[0].label
			},
			showorder() {
				//console.log(121212)	
				this.showOrder = true
				//console.log(this.showOrder)
			},
			order_qx() {

				this.from.id = ''
				this.from.check_status = ''
				this.from.check_fail_message = ''
				this.value = ''
				//console.log(JSON.stringify(this.from))
			},
			// 提交维修信息
			order_confirm() {
				if (this.from.check_status == ''){
					uni.showToast({
						icon: 'none',
						title: '请选择是否通过'
					})
				this.from.id = ''
				this.from.check_status = ''
				this.from.check_fail_message = ''
				this.value = ''
				return
			}
			if (this.from.check_status == 1) {
				if (this.from.check_fail_message == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入原因'
					})
					this.from.id = ''
					this.from.check_status = ''
					this.from.check_fail_message = ''
					this.value = ''
					return
				}



			}

			this.from.id = this.id

			// console.log(JSON.stringify(this.from))
			this.$u.post('/index/order_confirm', {
				...this.from
			}).then(res => {
				this.from.id = ''
				this.from.check_status = ''
				this.from.check_fail_message = ''
				this.value = ''
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
						success: function(e) {
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						}
					})
				}, 800)
			})
		},
		// 获取维修订单详情 /index/order_detail
		getXq() {
			this.$u.post('/index/order_detail', {
				id: this.id
			}).then(res => {
				console.log(res)
				this.info = res.data
				if (this.info.user_status == 0) {
					res.data.report_images = res.data.report_images.split(',')
				}
				console.log(res.data.report_images)
				res.data.report_images.forEach(item => {
					this.fileList.push({
						url: this.$IMG_URL + item
					})
				})
				console.log(this.fileList)
				if (this.info.user_status != 0) {
					res.data.repair_images.forEach(item => {
						this.repair_images.push({
							url: this.$IMG_URL + item
						})
					})
				}
				var time = res.data.repair_date.replace(/\//g, '/')
				let times = new Date(time).getTime()
				let nowTime = new Date().getTime()
				if (nowTime > times) {
					this.cuiweixiu = true
				} else {
					this.cuiweixiu = false
				}
				console.log(times)
				this.$forceUpdate()
				// res.data.repair_images = res.data.repair_images.split(',')

			})
		},
		// order_confirm
		// order_confirm() {
		// 	this.$u.post('/index/order_confirm', {
		// 		id: this.id
		// 	}).then(res => {
		// 		uni.showToast({
		// 			icon: 'success',
		// 			title: res.msg
		// 		})
		// 		uni.$emit('yiwancheng', {
		// 			index: this.index
		// 		})
		// 		// this.getOrderXq()
		// 		setTimeout(() => {
		// 			uni.navigateBack({
		// 				delta: 1
		// 			})
		// 		}, 100)
		// 	})
		// },
		quick() {
			let that = this
			this.$u.post('/index/quick', {
				id: this.id
			}).then(res => {
				uni.showToast({
					icon: 'success',
					title: res.msg
				})
				that.getOrderXq()
			}).catch(err => {
				console.log(err)
				uni.showToast({
					icon: 'none',
					title: err.data.msg
				})
			})
		}
	}
	}
</script>

<style lang="less">
	.btn-moren {
		height: 100rpx;
		font-size: 50rpx;
	}

	.xq-box {
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.xq-nr {
		padding: 40rpx 20rpx;
		line-height: 73rpx;
		font-size: 34rpx;
	}

	.xq-title {
		height: 130rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F7F7F9;
		padding: 0 20rpx;
		justify-content: space-between;
		
		
	}

	.xq-btn {
		font-size: 38rpx;
		padding: 40rpx 20rpx;
		border-top: 1px solid #F7F7F9;
		line-height: 64rpx;
	}

	.title {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	/deep/ .u-list-item {
		margin-left: 0 !important;
	}
</style>
